<template>
  <div class="w-800px overflow-hidden h-full flex-c-c flex-col">
    <el-scrollbar class="pr-12px" ref="scrollbar">
      <div class="w-full" ref="scroll-body">
        <div
          class="mb-16 b-dashed b-1 b-[var(--el-border-color)] p-1rem rounded-14px"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="message-item flex-wrap justify-end mb-48px">
            <div class="bubble">
              {{ item.question }}
            </div>
            <div class="w-full flex-center justify-end gap-12px">
              <el-icon class="cursor-pointer" @click="handleCopy(item.question)">
                <CopyDocument />
              </el-icon>
              <el-icon class="cursor-pointer" @click="handleResend(item.question)">
                <Refresh />
              </el-icon>
            </div>
          </div>
          <div class="message-item">
            <div class="user">
              <img src="@/assets/images/svg/deepseek.svg" alt="deepseek" />
            </div>
            <div class="content">
              <div v-if="item.sysRes" class="text-tips mb-4 sys-msg">
                {{ item.sysRes }}
              </div>
              <div
                v-if="item.thinking"
                class="text-tips mb-4 thinking-msg"
                v-html="item.thinking"
              ></div>
              <div v-html="parse(item.aiRes)"></div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="w-full flex-col p-12px rounded-24px bg-#f3f4f6">
      <el-input
        type="textarea"
        v-model="sendVal"
        :rows="2"
        :autosize="{ minRows: 2, maxRows: 10 }"
        resize="none"
        @keydown="handleKeydown"
        class="send-bar-input"
      ></el-input>
      <div class="flex-none flex justify-end">
        <el-button plain text @click="handleSend" class="p-0">
          <img :src="SendSvg" alt="send" class="w-30px h-30px" />
        </el-button>
        <el-button plain text @click="handleStop" class="p-0">
          <img :src="StopSvg" alt="send" class="w-30px h-30px" />
        </el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useLocalChatStore, type ChatListContent } from '@/stores/local'
import { parse } from 'marked'
import { useElementSize, useClipboard } from '@vueuse/core'
import { type ElScrollbar } from 'element-plus'
import { CopyDocument, Refresh } from '@element-plus/icons-vue'
import type { GenerateRequest } from 'ollama'
import SendSvg from '@/assets/svg/send.svg'
import StopSvg from '@/assets/svg/stop.svg'
defineOptions({ name: 'ChatBox' })
defineProps<{ list: ChatListContent[] }>()
const localChatStore = useLocalChatStore()
const scrollbar = useTemplateRef<InstanceType<typeof ElScrollbar>>('scrollbar')
const scrollBody = useTemplateRef<HTMLDivElement>('scroll-body')
const { height } = useElementSize(scrollBody)
watch(
  () => height.value,
  (val) => {
    console.log('🚀 ~ val:', val)
    nextTick(() => {
      scrollbar.value?.setScrollTop(height.value)
    })
  },
)

const clipboard = useClipboard()

const handleCopy = (text: string) => {
  clipboard
    .copy(text.trim())
    .then(() => {
      ElMessage.success('复制成功')
    })
    .catch(() => {
      ElMessage.error('复制失败')
    })
}
const handleResend = (text: string) => {
  const obj = {
    prompt: text,
    model: localChatStore.currentModel,
  }
  localChatStore.send(obj)
}
const sendVal = ref('')
const handleSend = () => {
  if (!sendVal.value.trim()) {
    return
  }
  const obj: GenerateRequest = {
    prompt: sendVal.value,
    model: localChatStore.currentModel,
  }
  useLocalChatStore().send(obj)
  sendVal.value = ''
}

const handleStop = () => {
  localChatStore.stop()
}

const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    handleSend()
  }
}
</script>
<style lang="scss">
.message-item {
  display: flex;
  gap: 12px;
  .bubble {
    width: fit-content;
    background-color: #eff6ff;
    border-radius: 14px;
    padding: 8px 16px;
  }
  .user {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--el-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
  }
  .content {
    flex: auto;
    .sys-msg {
      background-color: rgb(252.5, 245.7, 235.5);
      padding: 12px;
      line-height: 1.5;
    }
    .thinking-msg {
      background-color: rgb(252.5, 245.7, 235.5);
      padding: 12px;
      line-height: 1.5;
    }
  }
}
.send-bar-input {
  width: 100%;
  background-color: transparent;
  .el-textarea__inner {
    background-color: transparent;
    border: none;
    box-shadow: none;
  }
}
</style>
